<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="white-bg">
    <div id="formBox" class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-agent-edit" th:object="${payUserAll}">
            <input id="id" name="id" th:field="*{id}" class="form-control"  type="hidden">                                                                                <div class="form-group">
                <label class="col-sm-3 control-label">用户账号：</label>
                <div class="col-sm-8">
                    <input id="userLoginName" name="userLoginName" th:field="*{userLoginName}" class="form-control" type="text">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label">代理商状态：</label>
				<div class="col-sm-8">
					<select name="accoutState" class="form-control m-b" th:with="type=${@dict.getType('pay_accout_state')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{accoutState}"></option>
					</select>
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">姓名：</label>
                <div class="col-sm-8">
                    <input id="realname" name="realname" th:field="*{realname}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">手机号码：</label>
                <div class="col-sm-8">
                    <input id="phonenumber" name="phonenumber" th:field="*{phonenumber}" class="form-control" type="text">
                </div>
            </div>
            <div v-show="authType == '1'" class="form-group">
                <label class="col-sm-3 control-label">身份证正面：</label>
                <div class="col-sm-8">
                    <img id="certImgFont" :src="certImgFont" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
                </div>
            </div>
            <div v-show="authType == '1'" class="form-group">
                <label class="col-sm-3 control-label">身份证背面：</label>
                <div class="col-sm-8">
                    <img id="certImgBack" :src="certImgBack" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
                </div>
            </div>
            <div v-show="authType == '2'" class="form-group">
                <label class="col-sm-3 control-label">护照照片：</label>
                <div class="col-sm-8">
                    <img id="certImgPass" :src="certImgPass" class="col-sm-12 " style="width: 100%;height: 100%;padding: 0 0;">
                </div>
            </div>
			<div class="form-group">
				<label class="col-sm-3 control-label">实名认证状态：</label>
				<div class="col-sm-8">
					<select name="certState" class="form-control m-b" th:with="type=${@dict.getType('pay_user_cert_state')}">
						<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{certState}"></option>
					</select>
				</div>
			</div>
            <div class="form-group">
                <label class="col-sm-3 control-label">手续费分润比率：</label>
                <div class="col-sm-8">
                    <input id="dlRate" name="dlRate" th:field="*{dlRate}" class="form-control" type="text">
                </div>
            </div>
		</form>
    </div>
    <script th:src="@{/js/vue.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/ajaxupload.js}"></script>
    <div th:include="include::footer"></div>
    <script type="text/javascript">
        var prefix = ctx + "manager/user";
        var roleid = "4";
		$("#form-agent-edit").validate({
        rules:{
                        userLoginName:{
                            required:true,
                            minlength: 2,
                            maxlength: 20,
                            remote: {
                                url: ctx + "manager/user/checkLoginNameUnique",
                                type: "post",
                                dataType: "json",
                                data: {
                                    login_name : function() {
                                        return $.common.trim($("#userLoginName").val());
                                    }
                                },
                                dataFilter: function(data, type) {
                                    return $.validate.unique(data);
                                }
                            }
                        },
						accoutState:{
							required:true
						},
						realname:{
							required:true
						},
						dlRate:{
							required:true
						},
        },
        messages: {
            "userLoginName": {
                remote: "用户已经存在"
            }
        }
        });

		function submitHandler() {
	        if ($.validate.form()) {
                var params = $('#form-agent-edit').serialize();
                params += '&certImgFont=' + modelBean.certImgFont;
                params += '&certImgBack=' + modelBean.certImgBack;
                params += '&certImgPass=' + modelBean.certImgPass;
                $.operate.save(prefix + "/edit",params);
            }
        }

    var modelBean= {
        certImgFont: '',
        certImgBack: '',
        certImgPass: '',
    };

    var vm = new Vue({
        el: '#formBox',
        data: {
            authType: '[[${authType}]]',
            certImgFont: ctx + ('[[${payUserAll.certImgFont}]]' ? '[[${payUserAll.certImgFont}]]' : 'img/no_img.png'),
            certImgBack: ctx + ('[[${payUserAll.certImgBack}]]' ? '[[${payUserAll.certImgBack}]]' : 'img/no_img.png'),
            certImgPass: ctx + ('[[${payUserAll.certImgPass}]]' ? '[[${payUserAll.certImgPass}]]' : 'img/no_img.png'),
        },
        methods: {
        }
    });

    $(function () {
        new AjaxUpload('#certImgFont', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgFont = ctx + r.url;
                    modelBean.certImgFont = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });

        new AjaxUpload('#certImgBack', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgBack = ctx + r.url;
                    modelBean.certImgBack = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });

        new AjaxUpload('#certImgPass', {
            action: ctx + 'admin/file/upload',
            name: 'file',
            data: {
                logic: 'set_auth_img',
                type: 'auth',
                state: '0',
                puth:'11'
            },
            autoSubmit: true,
            responseType: "json",
            onSubmit: function (file, extension) {
                if (!(extension && /^(jpg|jpeg|png|gif)$/.test(extension.toLowerCase()))) {
                    alert('只支持jpg、png、gif格式的图片！');
                    return false;
                }
            },
            onComplete: function (file, r) {
                if (r.code == 0) {
                    vm.certImgPass = ctx + r.url;
                    modelBean.certImgPass = r.url;
                } else {
                    alert(r.msg);
                }
            }
        });
    });

	</script>
</body>
</html>
